<template>
  <view class="activity-card" :class="{'active': activity.state === 1}">
    <view class="card-header">
      <view class="status-badge" v-if="activity.state === 1">
        <uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
        <text>进行中</text>
      </view>
      <view class="title">{{activity.title}}</view>
    </view>
    
    <view class="card-content">
      <text class="content-text">{{activity.content}}</text>
    </view>
    
    <view class="card-footer">
      <view class="meta-info" v-if="myKey !== 1">
        <uni-icons type="person" size="14" color="#666"></uni-icons>
        <text class="creator">创建者：{{activity.creator}}</text>
      </view>
      <view class="meta-info">
        <uni-icons type="calendar" size="14" color="#666"></uni-icons>
        <text class="create-time">{{formattedCreateTime}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      activity: {
        type: Object,
        default: () => ({}),
        required: true
      },
      myKey: {
        type: Number,
        default: 0
      }
    },
    computed: {
      formattedCreateTime() {
        if (!this.activity.createTime) return '';
        const date = new Date(this.activity.createTime);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    }
  }
</script>

<style lang="scss">
  .activity-card {
    margin: 16rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    
    &.active {
      background: #f0f9eb;
      border-left: 8rpx solid #67c23a;
      
      .status-badge {
        background: #67c23a;
      }
    }
    
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .status-badge {
        display: flex;
        align-items: center;
        padding: 4rpx 12rpx;
        background: #909399;
        border-radius: 20rpx;
        margin-right: 12rpx;
        
        text {
          font-size: 24rpx;
          color: #fff;
          margin-left: 4rpx;
        }
      }
      
      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        flex: 1;
      }
    }
    
    .card-content {
      margin: 16rpx 0;
      
      .content-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 24rpx;
      padding-top: 12rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .meta-info {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        
        uni-icons {
          margin-right: 8rpx;
        }
        
        .creator {
          max-width: 200rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .create-time {
          white-space: nowrap;
        }
      }
    }
  }
</style>